<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container b_header">
        <header>
            <!-- navbar-inverse 反色条  navbar-fixed-top 顶部固定 -->
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <div class="navbar-brand">个人简历</div>
                        <!-- data-toggle="collapse" 展开和收缩 -->
                        <button class="navbar-toggle" data-toggle="collapse" data-target="#divNav">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <!-- class="collapse navbar-collapse" 被切换-->
                    <div id="divNav" class="collapse navbar-collapse">
                        <!-- 在里面有一个导航, 希望导航右侧对齐 -->
                        <ul class="nav navbar-nav navbar-right">
                            <!-- 在Li的里面我们希望有一个btn-success( 成功的按钮) 并且为按钮增加额外的属性 点击按钮 的时候出现一个名为data-target="#divModal"的模态框  -->
                            <li>
                                <button class="btn btn-success navbar-btnc h_modal" data-toggle="modal" data-target="#divModal" title="print">print(打印)</button>

                                <!-- 信息提示的按钮 data-toggle="tooltip" (切换) data-placement="bottom"(显示方向) -->
                                <button class="btn btn-info navbar-btn" data-toggle="tooltip" data-placement="bottom" title="Dowload">Dowload</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
    </div>
    <!-- 定义一个淡入淡出的模态框 这里面定义的Id 需要和我们在Button中的data-target="#divModal"定义的id名为一致 -->
    <div class="modal fade" id="divModal">
        <!--在modal中定义一个对话框 -->
        <!-- 在modal中定义要弹出的内容 -->
        <div class="modal-dialog">
            <!-- 在modal中定义要弹出的内容 -->
            <div class="modal-content">
                <!-- 在内容中我们希望有 头部;主题 尾部 -->
                <div class="modal-header">
                    <!-- 在头部定义 一个关闭的按钮 data-dissmiss="modal" 关闭命名为modal的模态框 &times;为一个X的符号 -->
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <!-- 在按钮的下方为什么定义一个modal-title的标题 -->
                    <h4 class="modal-tile">Print Resume</h4>
                </div>
                <div class="modal-body">
                    print preview Or print Config
                </div>
                <div class="modal-footer">
                    <!-- 在尾部在两个按钮 -->
                    <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary">print</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 正文区 -->
    <div class="container">
        <div class="row">
            <!-- 一行有12列;如果想要两大区域;可以这么写;如下:小屏幕 平板 (≥768px) col-sm-3小屏下站3列 -->
            <div class="col-sm-3">
                <!-- 个人信息面板 panel panel-default属于bootstrap中的一个组件面板,默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。 -->
                <div class="panel panel-default">
                    <div class="panel-heading">个人信息</div>
                    <div class="panel-body">
                        <!-- class="img-responsive"响应图片 img-rounded让图片四个角变圆角 .img-thumbnail为图片追加一个相册-->
                        <img src="./img/true1.jpg" alt="me" class="img-responsive img-rounded img-thumbnail">
                        <!-- text-primary情境文本颜色 -->
                        <p class="text-center text-primary">Carrie</p>
                        <!-- 添加一个地址 在bootstrap的排版中 -->
                        <address>
                            <!-- 联系地址 -->
                            <strong>联系地址</strong>
                            <br/>
                            <!-- 增加一个图标 -->
                            <span class="glyphicon glyphicon-home" title="Address">
                                <code> 广州市荔湾区东沙街南教小学</code>
                            </span>
                            <br>
                            <!-- 邮政编码 -->
                            <span class="glyphicon glyphicon-file" title="postalCode">
                                <kbd>510000</kbd>
                            </span>
                            <br>
                            <!-- 电话 -->
                            <span class="glyphicon glyphicon-phone " title="Mobile"> 18319566585</span>
                            <br>
                            <!-- 邮箱 -->
                            <span class="glyphicon glyphicon-envelope" title="Email"> 164591357@qq.com</span>
                        </address>
                    </div>
                </div>
                <!-- 个人信息 -->
                <div class="panel panel-info">
                    <div class="panel-heading">所会技能</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-3">
                                <!-- 文本辅助类text-muted color:#ccc -->
                                <span class="text-muted">HTML5</span>
                            </div>
                            <div class="col-sm-9">
                                <!-- 进度条 -->
                                <div class="progress">
                                    <!-- 带斜线的进度条 progress-bar-striped-->
                                    <div class="progress-bar progress-bar-striped active" style="width:80%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <!-- 文本辅助类text-muted color:#ccc -->
                                <span class="text-success">javascript</span>
                            </div>
                            <div class="col-sm-9">
                                <!-- 进度条 -->
                                <div class="progress">
                                    <!-- 带斜线的进度条 progress-bar-striped-->
                                    <div class="progress-bar progress-bar-success active" style="width:90%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <!-- 文本辅助类text-muted color:#ccc -->
                                <span class="text-danger">bootstrap</span>
                            </div>
                            <div class="col-sm-9">
                                <!-- 进度条 -->
                                <div class="progress">
                                    <!-- 带斜线的进度条 progress-bar-striped-->
                                    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:80%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 主要信息 -->
                <div class="panel panel-primary">
                    <div class="panel-heading">联系我们</div>
                    <div class="panel-body">
                        <!-- 增加一个水平表单 -->
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" id="email" class="form-control" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label">name</label>
                                <div class="col-sm-10">
                                    <input type="text" id="name" class="form-control" placeholder="name">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="button" class="btn btn-primary pull-right">Send</button>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧设置为巨幕 -->
            <div class="col-sm-9">
                <div class="jumbotron">
                    <!-- 写入个人简洁 -->
                    <p class="small text-right ">
                        参与制作超过5个企业项目,项目详情见
                        <a href="http://www.ddmg.com/">网站</a>
                        <br/> 参与制作超过5个企业项目,项目详情见
                        <a href="http://www.ddmg.com/">网站</a>
                        <br/> 参与制作超过5个企业项目,项目详情见
                        <a href="http://www.ddmg.com/">网站</a>
                        <br/>
                    </p>
                </div>
                <!-- 追加一个面板组 -->
                <div class="panel-grounp" id="accordion">
                    <!-- 面板组中分别有工作,教育,学习经验 -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <!--data-toggle="collapse" 展开和收缩  -->
                                <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">工作经验</a>
                            </div>
                        </div>
                        <!-- 追加一个可以展开和收缩的面板 在插件的collapse中 -->
                        <div id="collapseOne" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul class="list-group">
                                    <li class="list-group-item list-group-item-success">
                                        <div class="row">
                                            <div class="col-sm-4">2008/07 - 至今</div>
                                            <div class="col-sm-4">xxx公司</div>
                                            <div class="col-sm-4">web前端开发工程师</div>
                                        </div>
                                    </li>
                                    <li class="list-group-item list-group-item-warning">
                                        <div class="row">
                                            <div class="col-sm-4">2008/07 - 至今</div>
                                            <div class="col-sm-4">xxx公司</div>
                                            <div class="col-sm-4">web前端开发工程师</div>
                                        </div>
                                    </li>
                                    <li class="list-group-item list-group-item-info">
                                        <div class="row">
                                            <div class="col-sm-4">2008/07 - 至今</div>
                                            <div class="col-sm-4">xxx公司</div>
                                            <div class="col-sm-4">web前端开发工程师</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 教育经历 -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <!--data-toggle="collapse" 展开和收缩  -->
                                <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">教育经历程</a>
                            </div>
                        </div>
                        <!-- 追加一个可以展开和收缩的面板 在插件的collapse中 -->
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul class="list-group">
                                    <li class="list-group-item list-group-item-success">
                                        <div class="row">
                                            <div class="col-sm-4">2008/07 - 至今</div>
                                            <div class="col-sm-4">xxx学校</div>
                                            <div class="col-sm-4">计算机</div>
                                        </div>
                                    </li>
                                    <li class="list-group-item list-group-item-warning">
                                        <div class="row">
                                            <div class="col-sm-4">2008/07 - 至今</div>
                                            <div class="col-sm-4">xxx学校</div>
                                            <div class="col-sm-4">计算机</div>
                                        </div>
                                    </li>
                                    <li class="list-group-item list-group-item-info">
                                        <div class="row">
                                            <div class="col-sm-4">2008/07 - 至今</div>
                                            <div class="col-sm-4">xxx学校</div>
                                            <div class="col-sm-4">计算机</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 项目展示  -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <!--data-toggle="collapse" 展开和收缩  -->
                                <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">项目展示</a>
                            </div>
                            <div id="collapseThree" class="carousel slide" data-ride="carousel">
                                <div class="panel-body">
                                    <!-- Indicators -->
                                    <ol class="carousel-indicators">
                                        <li data-target="#collapseThree" data-slide-to="0" class="active"></li>
                                        <li data-target="#collapseThree" data-slide-to="1"></li>
                                        <li data-target="#collapseThree" data-slide-to="2"></li>
                                    </ol>

                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner" role="listbox">
                                        <div class="item active">
                                            <img src="./img/4.jpg" alt="..." class="img-responsive img-rounded">
                                            <div class="carousel-caption">
                                                ...
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img src="./img/5.jpg" alt="..." class="img-responsive img-rounded">
                                            <div class="carousel-caption">
                                                ...
                                            </div>
                                        </div>
                                        ...
                                    </div>

                                    <!-- Controls -->
                                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jquery-3.3.1.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script>
        // 如果不想要默认的title提示;我们可以在脚本中;加入一段方法;
        $(function () {
            // 只要在html找到有tooltip这个属性,会有一个方法让其从定制的方向出现;
            $('[data-toggle="tooltip"]').tooltip();
            var fin = function () {
                $('.h_modal').on('click .fade.in', function () {
                    // alert(1);
                    $(this).css({ 'z-index': 11 });

                })
            }
            fin();
        })
    </script>
</body>

</html>